<template>
	<!-- 服务进度 -->
	<view class="chat-bac vh">
		<view class="df d-a-center box list-box back3 border-line" v-for="(item,index) in messageList" :key="index"
			@click="toChat(item.chatId,item.sessionType,item.userNickname,item.receiverId, item.senderId,item.unreadCount)">
			<view class=" d-center" style="width: 16%;">
				<image :src="item.avatarJson" class="qu-g yuan" mode=""></image>
			</view>
			<view class="yuan reply-l d-center white-font" v-if="item.unreadCount">
				{{item.unreadCount}}
			</view>
			<view class="box change-flex d-j-around d-j-center" style="width: 80%;height: 85%;padding-left: 2%;">
				<view class="d-j-bet">
					<view class="text-b co-f">
						{{item.userNickname}}
					</view>
					<view class="text-a co-g">
						{{item.lastMessageTime}}
					</view>
				</view>
				<view class="omit text-a co-h ">
					<text v-if="item.messageType==0">{{item.lastMessage}}</text>
					<text v-if="item.messageType==1">[服务详情]</text>
					<text v-if="item.messageType==2">[图片]</text>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import {
		getMessagesList,
		markMessagesAsRead
	} from '@/apis/chat/index.js'
	export default {
		props: {
			actionName: {
				type: String,
				default: ''
			},
			messageTemplate: {
				type: Number,
				default: 0
			},
			index: {
				type: String,
				default: 1
			}
		},
		data() {
			return {
				// 用户订单
				messageList: [],
				page: {
					pageSize: 10,
					pageNum: 1
				},
				more: 'loading',
				isReachBottom: false,
				selectSource: false,
			}
		},
		mounted() {
			this.init()
			console.log('组件中的', this.index);
		},
		beforeMount() {
			uni.$on('onReachBottom', () => {
				if (this.more == 'noMore') return
				// 显示加载更多数据
				this.isReachBottom = true
				this.more = 'loading'
				this.page.pageNum++
				this.init()
			})
		},
		destroyed() {
			uni.$off('onReachBottom')
		},
		methods: {
			async init() {
				// 护士是1，用户是2
				let service = this.index == 1 ? 81 : 80 
				let res = await getMessagesList(service, this.page.pageNum, this.page.pageSize)
				console.log("请求结果",res)
				if (res.success) {
					let list = res.object.object.list
					console.log('ooo', this.index, 'kkk', 111, list);
					list = list.filter(i => {
						return i.sessionType == this.index
					})
					
					if (list.length > 0) {
						// 默认为false,不是弹窗中的列表
						if (!this.isReachBottom) {
							this.messageList = list
						} else if (this.more == 'loading') {
							this.messageList.push(...list)
						} else {
							this.messageList = list
							this.more = 'loading'
							this.isReachBottom = false
						}
					} else {
						if (this.isReachBottom) {
							this.more = 'noMore'
							this.page.pageNum = 1
						} else {
							// this.messageList = []
							this.isReachBottom = false
						}
					}
				}
				console.log('过滤后', this.messageList);
			},
			async toChat(id, sessionType, userNickname, receiverId, senderId, unreadCount) {
				let userId = ''
				if ([80,81].includes(receiverId)) {
					userId = senderId
				} else {
					userId = receiverId
				}
				if (unreadCount > 0) {
					let res = await markMessagesAsRead(id, userId)
					if (res.success) {
						console.log('消息已读成功');
					}
				}
				uni.navigateTo({
					url: '/pages/customerService/message-chat?id=' + id + '&sessionType=' + sessionType +
						'&userNickname=' + userNickname + '&userId=' + userId
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.list-box {
		height: 164rpx;
		margin-top: 10rpx;
	}

	.reply-l {
		background-color: red;
		width: 35rpx;
		font-size: 20rpx;
		margin-top: -60rpx;
		margin-left: -26rpx;
	}
</style>